<template>

  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
              <el-form-item label="活动名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
              <el-form-item label="活动内容">
                <el-input v-model="form.content"></el-input>
              </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content ">
            <el-button  @click="onResetClick">重置</el-button>
            <el-button  type="primary" @click="onSearchClick">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content ">
            <el-button  @click="showDialog">点击打开 Dialog</el-button>

            <tableform :tablerow.sync="tablerow" :centerDialogVisible.sync="centerDialogVisible" @closeDialog="closeDialog"/>
          </div>
        </el-col>

      </el-row>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      :default-sort = "{prop: 'Title', order: 'descending'}"
      size="mini"
      @selection-change="handleSelectionChange"
      @sort-change="onSortChange"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column align="center" prop="ID" label="ID" sortable width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title" prop="Title" sortable>
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" prop="Pageviews" sortable width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Operater" width="110" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="onEditClick(scope.row)"
          >编辑
          </el-button>
          <el-popover
            placement="top"
            width="180"
            v-model="scope.row.visible">
            <p>确定删除这条记录吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="cancleDelete(scope.row)">取消</el-button>
              <el-button type="primary" size="mini" @click="doDelete(scope.row)">确定</el-button>
            </div>
            <el-button type="text"  slot="reference">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24" align="middle">
        <div class="grid-content bg-purple-dark">
          <template>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="100"
                layout="total, prev, pager, next"
                :total="currentTotal">
              </el-pagination>
            </div>
          </template>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getList } from '@/api/table'
import tableform from './tableform'
import { MessageBox, Message } from 'element-ui'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components:{
    tableform
  },
  data() {
    return {
      list: null,
      listLoading: true,
      centerDialogVisible: false,
      currentPage1:5,
      currentTotal:1001,
      multipleSelection:[],
      tablerow:{},
      form:{
        "name":"name test",
        "content":"content ceshi"
      },
      visible : false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    // 编辑按钮被点击
    async onEditClick(obj) {
      this.showDialog()
      //Message.info(JSON.stringify(obj))
      this.tablerow = obj
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`每页 ${this.currentTotal} 条`);

      console.log(`当前页: ${this.currentPage1}`);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      var ids = null
      this.multipleSelection.map(item=>{
        if (ids === null){
          ids = item.id
        } else {
          ids += ','+ item.id
        }
      })
      console.log("ids = " + ids);

    },
    onSortChange(column){
      Message.info(column.prop + ", " +column.order)

    },
    onSearchClick() {
      console.log("search");

    },
    onResetClick() {
      this.form = {}
      console.log("reset");
    },
    showDialog(){
      this.centerDialogVisible=true
    },
    closeDialog(){
      this.centerDialogVisible=false
      console.log("Father components closeDialog");
    },
    doDelete(row){
      row.visible = false;

      console.info("doDelete : " + row.id)

      this.list = null
      this.fetchData()

    },
    cancleDelete(row){
      row.visible = false;

      console.info("cancleDelete")

    }

  }
}
</script>

<style >
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
